<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /*对于只有一个列表项的特殊场景来说，解决方案显然就是:onlychild*/
  
  li:only-child {
    /* 只有一个列表项时的样式 */
  }
  /*实际上，:only-child 等效于:first-child:last-child， 道理很
简单：如果第一项同时也是最后一项，那从逻辑上来说它就是唯一的那一
项。:last-child 其实也是一个快捷写法，相当于:nth-last-child(1)：*/
  /*li:first-child:nth-last-child(4) 会命中哪些元素吗*/
  /*一个正好有四个列表项的列表中的第一个列表项*/
  /*。我们现在已经找
到一种命中特定数量列表项中第一项的方法，接下来就可以用兄弟选择符
（~）来命中它之后的所有兄弟元素：相当于在这个列表正好包含四个列表项
时，命中它的每一项，而这正是我们一直想要达成的目标：
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
/* 当列表正好包含四项时，命中所有列表项 
}*/
  /*根据兄弟元素的数量范围来匹配元素*/
  /*:nth-child(n+4) 将会选中除了第一、二、
三个子元素之外的所有子元素*/
  /*li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
/* 当列表至少包含四项时，命中所有列表项 
}
*/
  /*同理，-n+b 这种形式的表达式可以选中开头的b 个元素。因此，仅当
列表中有4 个或更少的列表项时（参见图7-12），要选中所有列表项可以这
样写：*/
  /*li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
/* 当列表最多包含四项时，命中所有列表项 
}
*/
  /*当然，我们还可以把这两种技巧组合起来使用，不过代码也会变得更加
复杂。假设我们希望在列表包含2 ～ 6 个列表项时命中所有的列表项，可以
这样写：
li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
/* 当列表包含2～6项时，命中所有列表项 
}*/
</style>

<body>

</body>

</html>